<template>
	<div class="city">
		<div class="header">
			<router-link to="/" tag="div" class="iconfont city-back-icon">&#xe624;</router-link>
			<div class="city-header">{{currentCity}}</div>
		</div>
		<div class='city-content'>
			<div class="city-content-currentSelect">
				<span class="title">当前选择的城市:</span>
				<div class="currentSelect">{{this.currentCity}}</div>
			</div>
			<div class="hotTitle">热门城市:</div>
			<div class="cityName" v-for="(item, index) of cities" :key="index" @click="selectChange(item)">{{item}}</div>
		</div>
		<div class="city-icons">
			<city-icon></city-icon>
		</div>
	</div>
</template>

<script>
import CityIcon from './components/Icon'

export default {
	name: 'City',
	data () {
		return {
			currentCity: '',
			cities: ['北京', '杭州', '长沙', '南京', '西安', '广州']
		}
	},
	methods: {
		selectChange: function (city) {
			this.currentCity = city
			this.$store.commit('selectChange', {currentCity: city})
		//	this.$store.dispatch('increment')
		}
	},
	mounted () {
		this.currentCity = this.$route.params.cityName
	},
	components: {
		CityIcon
	}
}
</script>

<style lang="stylus">
@import '~styles/varibles.styl'
	.city
		.header
			display: flex
			background: $bgColor
			text-align: center
			color: #fff
			.city-back-icon
				width: 60px
				height: 60px
				line-height: 60px
				font-size: 20px
			.city-header
				flex: 1
				line-height: 60px
		.city-content
			width: 100%
			padding-bottom: 30%
			.city-content-currentSelect
				width: 100%
				height: 30%
				margin-top: 10px
				.title
					margin-top: 10px
					font-size: 16px
					color: #fff
					background: $bgColor
				.currentSelect
					width: 60px
					height: 30px
					line-height: 30px
					margin-left: 30px
					background: #eee
					text-align: center
			.hotTitle
				font-size: 16px
				color: #fff
				background: $bgColor		
			.cityName
				float: left
				width: 60px
				height: 30px
				line-height: 30px
				background: #eee
				color: #000
				margin-left: 30px
				margin-top: 10px
				text-align: center
</style>
